<template>
  <div :id="id" style="width:100%; height:150px;"></div>
</template>

<script>
var echarts = require('echarts')
export default {
  props: {
    id:{
      type: Number,
      default: function () {
        return 0
      }
    },
    echartsTasks:{
      type:Array,
      default: function(){
        return []
      }
    },
    today:{
      type: String,
      default:function(){
        return ''
      }
    }
  },
  data(){
    return {
      pieReady: false
    }
  },
  mounted() {
    this.createOptions()
    this.processTasks()
    console.log('我是传过来的值',this.echartsTasks)
  },
  methods:{
    // 对数据进行处理，判断哪些是新增等
    processTasks(){
      return new Promise((resolve,reject)=>{
        let newTask = []
        let sudTask = []
        let downTask = []
        let cancelTask = []
        let noDownTask = []
        this.echartsTasks.map((task,index)=>{
          // 左边的饼图
          //新增任务 tags.created=today&&tags.due!=today
          if(task.tags.created == this.today && task.tags.created != this.today){
            newTask.push(task)
          }
          //突发任务 tags.created=today&&tags.due==today
          if(task.tags.created == this.today && task.tags.created == this.today){
            sudTask.push(task)
          }
          //完成任务 state=done
          if(task.state == 'done'){
            downTask.push(task)
          }
          //取消任务 state=done
          if(task.state == 'cancelled'){
            cancelTask.push(task)
          }
          //未完任务 state=done
          if(task.state !== 'done' && task.state !== 'cancelled'){
            noDownTask.push(task)
          }
          //右边的饼图
          calcTime(task)
          console.log('我有没有调用')
        })
        resolve([newTask.length,sudTask.length,downTask.length,cancelTask.length,noDownTask.length])
        })
    },
    //绘制饼图的options
    createOptions(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById(this.id));
          let options = {
            title: {
              show:true,
              x:'left'
            },
            tooltip : {
              trigger:'item',
              formatter: "{a} <br/>{b} : {c}({d}%)"  //有特殊含义，分别指{a}（系列名称），{b}（数据项名称），{c}（数值）,{d}（百分比）
            },
            color:['#6699CC','pink','#04BE02','#7EB679','#FF9900'] ,  //每一个扇形的颜色
            series: [{
              name: '排产数量',
              type: 'pie',
              radius:'85%',  //饼图半径
              center:['50%','50%'],   //饼图位置
            label: {  //饼图标签设置（位置、字体大小、颜色）
              normal:{
              position:'inside',
                textStyle:{
                fontSize:8,
                color:'#000'
                }
              }
            },
            data:[]
            }]
        }
        if(this.id == 1){
          this.processTasks().then((result)=>{
            let pie = []
            result.map((task,index)=>{
              pie.push({
                name: '',
                value:task
              })
            })
            let pieTitleLeft = ['新增','突发','完成','取消','未完']
            pieTitleLeft.map((title,index)=>{
              pie[index].name = title
            })
            options.series[0].data = pie
            // 绘制图表
            myChart.setOption(options)
          })
        }
        else{
          this.processTasks().then((result)=>{
            let pie = []
            result.map((task,index)=>{
              pie.push({
                name: '',
                value:task
              })
            })
            let pieTitleLeft = ['超时','提前','准时','未知']
            pieTitleLeft.map((title,index)=>{
              pie[index].name = title
            })
            options.series[0].data = pie
            // 绘制图表
            myChart.setOption(options)
          })
        }

    }
  }
}
</script>e

<style>

</style>
